window.onload = function(){
	var imgs = document.querySelectorAll('#wrap img');
	var imgLength = imgs.length;
	var wrap = document.querySelector('#wrap');
	
	for(let i=0; i<imgs.length; i++){
		//禁止拖动图片
		imgs[i].ondragstart = ()=>false;
		imgs[i].onselectstart = ()=>false;
		let deg = 360/imgLength*i;
		imgs[i].style.transform = "rotateY("+deg+"deg) translateZ(150px)";
		//过度 //延迟时间：
		imgs[i].style.transition = '1s';
	}
	//拖动图片
	let lastX,lastY, newX,newY,rotatex=0,rotatey=-20;
	document.addEventListener('mousedown',function(e){
		//这里的this指向document
		lastX = e.clientX;
		lastY = e.clientY;
		this.onmousemove =  function(e){
			newX = e.clientX;
			newY = e.clientY;
			let differenceX = newX - lastX;//differenceX差
			let differenceY = newY - lastY;
			rotatex +=differenceX*0.2;
			rotatey -=differenceY*0.1;
			if(rotatey>=-5){
				rotatey = -5;
			}else if(rotatey<=-45){
				rotatey = -45;
			}
			//设置外边盒子的旋转
			wrap.style.transform = 'rotateX('+rotatey+'deg) rotateY('+rotatex+'deg)';
			lastX = newX;
			lastY = newY;
			this.addEventListener("mouseup",function(e){
				this.onmousemove = null;
				
			});
		};
	});
}